<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    height="100px"
    ellipsis="false"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <el-avatar
        src="../../../public/main/logo.jpg"
        style="width: 60px; height: 60px"
      ></el-avatar
    ></el-menu-item>
    <el-menu-item index="1"><h1>天水市绿化管理系统</h1></el-menu-item>
    <span></span>
    <!-- 头像 -->
    <el-menu-item index="2">
      <div class="block" v-if="this.$store.state.user.job">
        <el-image
          style="width: 60px; border-radius: 50%"
          :src="url"
          @click="centerDialogVisible = true"
        ></el-image>
        <el-dialog
          v-model="centerDialogVisible"
          width="30%"
          center
          title="点击图片任意位置可修改"
        >
          <el-image
            style="width: 100%"
            :src="url"
            @click="dialogVisible = true"
          ></el-image>
          <!-- 修改头像 -->
          <el-dialog v-model="dialogVisible" width="30%" center>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/file/photo"
              :show-file-list="false"
              :data="username"
              auto-upload=true
              drag=true
              :on-success="handleAvatarSuccess"
              :on-change="handleChange"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl"  class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-dialog>
        </el-dialog>
      </div>
    </el-menu-item>
    <el-menu-item index="4" @click="firstPage">首页</el-menu-item>
    <el-menu-item index="3" @click="login" v-if="!this.$store.state.user.job"
      >登录</el-menu-item
    >
    <el-menu-item index="5" @click="exit" v-if="this.$store.state.user.job"
      >退出登录</el-menu-item
    >
  </el-menu>
</template>

<script >
import { ElMessage } from 'element-plus'

export default {
  name: "main-head",
  data(){
    return {
      centerDialogVisible : false,
      dialogVisible: false,
      autoUpload:false,
      username: {},
      imageUrl: '',
      url:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    }
  },
  methods: {
    login() {
      this.$router.push("/login")
    },
    changepPhoto() {
      this.centerDialogVisible = true;
    },
    firstPage() {
      this.$router.push("/");
    },
    exit() {
      this.$store.commit("add", [{ job: null }]);
      this.$router.push("/");
    },
    handleAvatarSuccess(response,uploadFile){
      const user = this.$store.state.user;
      user.photo = response.data;
      this.$store.commit("add",user);
      this.url = "http://localhost:8080/" + this.$store.state.user.photo;
      ElMessage({message: '成功修改头像', type: 'success',center:true})
    },
    handleChange(uploadFile){
      console.log("handleAvatarPreview");
      this.imageUrl = URL.createObjectURL(uploadFile.raw);
    },
  },
  mounted() {
    this.username = {username:this.$store.state.user.username,flag:"photo"} ;
    if (this.$store.state.user.photo != null) {
      this.url = "http://localhost:8080/" + this.$store.state.user.photo;
    }
  },
};
</script>

<style scoped>
.el-menu-demo {
  height: 100px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
span {
  display: inline-block;
  width: 700px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 100%;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>